<template>
  <div class="box-content">
    <Navbar :appTitle="title" :rtitle="rtitle" :rname="rname" />
    <Search
      ref="topSearch"
      class="search"
      placeholder="商品名称|商品编号|订单编号|销售订单"
      :isAdd="false"
      :isScreen="true"
      :isType="true"
      @onSearch="onSearch"
      @onScreen="onScreen"
    >
    </Search>
    <search-tag
      ref="SearchTag"
      :keyword="keyword"
      @resetCategory="resetCategory"
      @getCategory="getCategory"
      v-show="showSearchTag"
    ></search-tag>

    <div class="serach-content">
      <div class="content">
        <span
          class="tapbtn"
          @click="tapChange(index)"
          v-for="(item, index) in tabList"
          :key="index"
          :class="{ active: index == active }"
          >{{ item.name }}</span
        >
      </div>
    </div>

    <!--分页列表 -->
    <div class="listBox" :style="{height: GLOBAL.currentEnvironment ? 'calc(100vh - 1rem)' : 'calc(100vh - 1.5rem)'}">
      <pageList
        ref="pageList"
        :checkedShow="checkedShow"
        :operationTxt="operationTxt"
        :columns="columns"
        :listUrl="listUrl"
        @getCheckedValue="getCheckedValue"
        @handleList="handleList"
        @listTotal="listTotal"
      >
        <div class="rt-column" slot="body" slot-scope="{ item }">
          <div class="rt-row" v-if="active == 0">
            <div class="column">
              <span class="column-t">承诺交期：</span>
              <span
                class="column-c"
                :style="{ color: promiseDateCheck(item.promiseDate) }"
                >{{ item.promiseDate }}</span
              >
            </div>
          </div>
          <div class="rt-row" v-else>
            <div class="column">
              <span class="column-t">计划产出：</span>
              <span class="column-c">{{ item.planProductNumUnitText }}</span>
            </div>
          </div>
          <div class="rt-row">
            <div class="column">
              <span class="column-t">生产物品：</span>
              <span class="column-c"
                >{{ item.goodsCode }} | {{ item.goodsName }}</span
              >
            </div>
          </div>
        </div>
        <div
          slot="foot"
          slot-scope="{ item }"
          v-show="active == '0'"
          @click.stop="actions(item)"
          class="foot-slot"
        >
          <span></span
          ><span @click="toDistribute(item)">{{ asyncBtn(item) }}</span>
        </div>
      </pageList>
    </div>
  </div>
</template>

<script>
import Search from "@/components/search";
import SearchTag from "./SearchTag";
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import pageList from "@/components/pageList";
import moment from "moment";
export default {
  name: "carRoomList",
  components: { Navbar, TabBar, pageList, Search, SearchTag },
  data() {
    return {
      title: "生产订单",
      rtitle: "",
      rname: "", //search
      active: "0",
      tabList: [
        { name: "待派发(0)", value: "0" },
        { name: "已派发", value: "1" },
      ],
      checkedShow: false, //列表是否支持选择
      operationTxt: "确定1", //选择按钮名称
      listUrl: "/planmgt/erpProductOrder/list", //列表接口
      columns: {
        titleKey: "code", //标题
        // subtitleKey: "description",//副标题
        // content: [
        //   //内容
        //   {
        //     name: "承诺交期",
        //     key: ["promiseDate"],
        //   },
        //   {
        //     name: "生产物品",
        //     key: ["goodsCode", "goodsName"],
        //   },
        // ],
        labelKey: ["promiseDate", "spec"], //标签
        labelText: { promiseDate: "承诺交期：", spec: "规格：" }, //标签
        // operation: [
        //   //操作
        //   {
        //     name: "派发至车间",
        //     remarks:
        //       "说明是的撒的撒打算大撒的多撒点打算大撒多撒打算打算打算的的撒打算大撒",
        //   },
        // ],
        // operationText: '派发至车间'
      },
      showSearchTag: false,
      keyword: "",
      params: {
        status: 0,
      },
    };
  },
  beforeRouteLeave(to, from, next) {
    let that = this;
    switch (true) {
      case that.showSearchTag && !that.$refs.SearchTag.ddthrVisible:
        that.showSearchTag = false;
        this.title = "生产订单";
        next(false);
        break;
      case that.$refs.SearchTag.ddthrVisible:
        that.$refs.SearchTag.ddthrVisible = false;
        this.title = "更多筛选";
        next(false);
        break;
      case !that.showSearchTag:
        next();
        break;
    }
  },
  computed: {},
  mounted() {
    this.searchQuery();
  },
  created() {},
  methods: {
    /* 承诺交期是否超时判断 */
    promiseDateCheck(v) {
      let toDay = moment().format("YYYY-MM-DD");
      let checked = false;
      if (toDay == v) {
        checked = false;
      } else {
        checked = moment(v).isSameOrBefore(toDay);
      }
      return checked ? "" : "#ff4d4f";
    },
    toDistribute(v) {
      this.$router.push({
        path: "/distribute",
        query: {
          id: v.id,
          goodsId: v.goodsId,
        },
      });
    },
    // 操作
    actions(item) {},
    asyncBtn() {
      if (this.active == "0") {
        return "派发至车间";
      }
    },
    listTotal(t) {
      if (this.active == 0) {
        this.tabList[0].name = `待派发(${t})`;
      }
    },
    onSearch(v) {
      this.keyword = v;
      console.log(this.keyword);
      this.searchQuery();
    },
    onScreen() {
      this.keyword = this.$refs.topSearch.value;
      this.showSearchTag = true;
      this.title = "更多筛选";
    },
    resetCategory() {
      this.showSearchTag = false;
      // this.$refs.topSearch.value = ''
      // this.keyword = ''
      // this.params = {
      //   status: this.active
      // }
      // this.searchQuery()
    },
    getCategory(p, k) {
      this.params = p;
      this.keyword = k;
      this.params.status = this.active;
      this.showSearchTag = false;
      console.log(this.params);
      this.$refs.topSearch.value = k;
      this.title = "生产订单";
      this.searchQuery();
    },
    // 获取选择的列表数据
    getCheckedValue(ids, item) {
      console.log(ids, item);
    },
    //列表点击事件
    handleList(id, item, type) {
      console.log(id, item, type, "id:列表id,item:列表对象,type:事件名");
      if (type === "列表") {
        this.$router.push({
          path: "/proOrderDetail",
          query: {
            id: id,
            type: this.active,
            item: item,
          },
        });
      } else {
      }
    },
    // 加载列表
    getList() {
      // 传1代表从第一条数据开始
      this.$refs.pageList.onLoad(1);
    },
    // 搜索
    searchQuery() {
      // 搜索条件
      let queryParam = {
        ...this.params,
      };
      queryParam.keyword = this.keyword;
      this.$refs.pageList.searchQuery(queryParam);
    },
    // 重置
    searchReset() {
      this.$refs.pageList.searchReset();
    },
    tapChange(obj) {
      if (obj == 1) {
        this.columns.labelKey = ["promiseDate", "chargeUserIdText"];
        this.columns.labelText = {
          promiseDate: "承诺交期：",
          chargeUserIdText: "负责人：",
        };
      } else {
        this.columns.labelKey = ["promiseDate", "spec"];
        this.columns.labelText = { promiseDate: "承诺交期：", spec: "规格：" };
      }
      this.active = obj;
      this.params.status = this.tabList[obj].value;
      this.searchQuery();
    },
    goSearch() {
      this.$router.push({ path: "/carRoomPlaneSearch" });
    },
  },
};
</script>
<style lang="scss" scoped>
.box-content {
  height: 100vh;
  overflow-y: scroll;
  .serach {
    height: 66px;
    background: #f2f2f6;
    border-radius: 0rem;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 66px;
    padding: 20px 24px;
    // border: 1px solid red;
    .placeh {
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 46px;
    }
    .icon {
      width: 30px;
      height: 32px;
    }
  }
  .serach-content {
    // height: 1.52rem;
    background: #ffffff;
    padding: 0 32px 32px 32px;
    .content {
      display: flex;
      .tapbtn {
        // height: 0.23rem;
        // background: #1890ff;
        background: #f2f2f6;
        border-radius: 4px;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 46px;
        margin-right: 24px;
        text-align: center;
        padding: 8px 56px;
        cursor: pointer;
      }
      .active {
        color: #ffffff;
        background: #1890ff;
      }
    }
  }
}
.foot-slot {
  display: flex;
  justify-content: space-between;
  font-size: 0.14rem;
  color: #1890ff;
}
/deep/.van-nav-bar {
  z-index: 99 !important;
}
.rt-column {
  padding: 34px 0 0 34px;
  //  border: 1px solid red;
}
.rt-row {
  margin-bottom: 0.1rem;
  .column {
    width: 100%;
    .column-t {
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      margin-bottom: 0.03rem;
    }
    .column-c {
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
    }
  }
}
.listBox {
  height: calc(100vh - 300px);
  overflow-y: auto;
}
</style>